import {
  FilterOutlined,
  FullscreenOutlined,
  MinusOutlined,
  PlusOutlined,
  ReloadOutlined,
} from '@ant-design/icons';
import { Toolbar } from '@antv/graphin-components';

const options = [
  {
    key: 'Filter',
    name: (
      <span>
        <FilterOutlined />
      </span>
    ),
    icon: <FilterOutlined />,
  },
  {
    key: 'Refresh',
    name: (
      <span>
        <ReloadOutlined />
      </span>
    ),
    icon: <ReloadOutlined />,
  },
  {
    key: 'zoomIn',
    name: (
      <span>
        <MinusOutlined />
      </span>
    ),
    icon: <MinusOutlined />,
  },
  {
    key: 'zoomOut',
    name: (
      <span>
        <PlusOutlined />
      </span>
    ),
    icon: <PlusOutlined />,
  },
  {
    key: 'AutoZoom',
    name: (
      <span>
        <FullscreenOutlined />
      </span>
    ),
    icon: <FullscreenOutlined />,
  },
];

const optionsWithoutFilter = [
  {
    key: 'Refresh',
    name: (
      <span>
        <ReloadOutlined />
      </span>
    ),
    icon: <ReloadOutlined />,
  },
  {
    key: 'zoomIn',
    name: (
      <span>
        <MinusOutlined />
      </span>
    ),
    icon: <MinusOutlined />,
  },
  {
    key: 'zoomOut',
    name: (
      <span>
        <PlusOutlined />
      </span>
    ),
    icon: <PlusOutlined />,
  },
  {
    key: 'AutoZoom',
    name: (
      <span>
        <FullscreenOutlined />
      </span>
    ),
    icon: <FullscreenOutlined />,
  },
]

// 没有filter的toolbar
const OptionToolbarTwo = (props) => {
  const handleClick = (graphinContext, config) => {
    const { apis } = graphinContext;
    const { handleZoomIn, handleZoomOut, handleAutoZoom } = apis;
    if (config.key === 'zoomIn') {
      handleZoomIn();
    } else if (config.key === 'zoomOut') {
      handleZoomOut();
    } else if (config.key === 'AutoZoom') {
      handleAutoZoom();
    } else if (config.key === 'Refresh') {
      props?.refresh();
    }
  };
  return (
    <Toolbar
      style={{
        position: 'absolute',
        // top: '-10%',
        left: '0%',
        width: '8.5em',
      }}
      options={optionsWithoutFilter}
      onChange={handleClick}
      direction={props.direction}
    />
  );
};

const OptionToolbar = (props) => {
  const handleClick = (graphinContext, config) => {
    const { apis } = graphinContext;
    const { handleZoomIn, handleZoomOut, handleAutoZoom } = apis;
    if (config.key === 'zoomIn') {
      handleZoomIn();
    } else if (config.key === 'zoomOut') {
      handleZoomOut();
    } else if (config.key === 'AutoZoom') {
      handleAutoZoom();
    } else if (config.key === 'Refresh') {
      props?.refresh();
    } else if (config.key === 'Filter') {
      props?.filter();
    }
  };
  return (
    <Toolbar
      style={{
        position: 'absolute',
        top: '-10%',
        left: '0%',
        width: '10.5em',
      }}
      options={options}
      onChange={handleClick}
      direction={props.direction}
    />
  );
};

export { OptionToolbar, OptionToolbarTwo };